// 专门处理权限路由的模块
import { constantRoutes, asyncRoutes } from '../../router/index'
const state = {
   // 路由表，表示当前用户所拥有的所有路由的数组
   // 用户一开始肯定拥有静态路由的权限
   routes: constantRoutes
}
const mutations = {
   // 定义修改 routes 的 mutations
   // 第二个参数载荷，认为是我们登录成功需要添加的新的路由
   setRoutes(state, newRoutes) {
      // 每次设置路由应该在静态路由的基础上去加新的路由，不要在原有的基础上加
      state.routes = [...constantRoutes, ...newRoutes]
   }
}
// 动态路由中所定义的 name ，就是我权限标识所对应的 name，
// 这个name只要能和我 userInfo --> roles --> menus 中的name能对上
// 就可以把这个路由拿过来，addRoutes 到当前的路由上
const actions = {
   // 筛选权限路由
   // 第二个参数为当前用户的所拥有的菜单权限
   // menus:结构 ['settings', 'permissions']
   // asyncRoutes 是所有的动态路由
   // asyncRoutes 结构：[{ path:'' , name: '' }]
   filterRoutes(context, menus) {
      const routes = []
      // 筛选出动态路由中和menus中能够对应上的路由
      menus.forEach(key => {
         // key 就是标识
         // asyncRoutes找有没有对象中的name属性等于key 的，找不到就没权限
         // 找到了就把它筛选出来
         // 得到一个数组，有可能是空数组
         // 表示这是我当前用户的权限的路由
         // 得到的 routes 是所有模块中满足权限要求的路由的数组
         // routes 就是筛选出的当前用户所拥有的动态路由的权限
         // 数组 push 数组
         routes.push(...asyncRoutes.filter(item => item.name === key))
      })
      // 将动态路由 提交给 mutations，结果就是每次显示的路由都是静态路由 + 筛选出的当前用户的权限路由
      context.commit('setRoutes', routes)
      // 因为 state 是用来显示左侧菜单用的， return 是给路由 addRoutes 用的
      return routes
   }
}
export default {
   namespaced: true,
   state,
   mutations,
   actions
}
// 权限路由处理总步骤：
// 1.先在 vuex 中建立一个专门处理权限路由的模块

// src-- > store-- > modules-- > permission

// 2.写好模板

// 3.导入进 vuex 的模块化中生效

// store-- > index
// import permission from './modules/permission'

// 4.state 中设置默认的静态路由

// 先引入 import { constantRoutes } from '../../router/index'
// import { Sidebar } from '@/layout/components'
// const state = {
//    // 路由表，表示当前用户所拥有的所有路由的数组
//    // 用户一开始肯定拥有静态路由的权限
//    routes: constantRoutes
// }

// 5.mutations 中设置函数，每次路由应该在静态路由的基础上去加新的路由，不要在原有的基础上加

// const mutations = {
//    // 定义修改 routes 的 mutations
//    // 第二个参数载荷，认为是我们登录成功需要添加的新的路由
//    setRoutes(state, newRoutes) {
//       // 每次设置路由应该在静态路由的基础上去加新的路由，不要在原有的基础上加
//       state.routes = [...constantRoutes, ...newRoutes]
//    }
// }

// 6.在 actions 中封装一个关于筛选当前用户所拥有的动态路由的权限

// // 动态路由中所定义的 name ，就是我权限标识所对应的 name，
// // 这个name只要能和我 userInfo --> roles --> menus 中的name能对上
// // 就可以把这个路由拿过来，addRoutes 到当前的路由上
// const actions = {
//    // 筛选权限路由
//    // 第二个参数为当前用户的所拥有的菜单权限
//    // menus:结构 ['settings', 'permissions']
//    // asyncRoutes 是所有的动态路由
//    // asyncRoutes 结构：[{ path:'' , name: '' }]
//    filterRoutes(context, menus) {
//       const routes = []
//       // 筛选出动态路由中和menus中能够对应上的路由
//       menus.forEach(key => {
//          // key 就是标识
//          // asyncRoutes找有没有对象中的name属性等于key 的，找不到就没权限
//          // 找到了就把它筛选出来
//          // 得到一个数组，有可能是空数组
//          // 表示这是我当前用户的权限的路由
//          // 得到的 routes 是所有模块中满足权限要求的路由的数组
//          // routes 就是筛选出的当前用户所拥有的动态路由的权限
//          // 数组 push 数组
//          routes.push(...asyncRoutes.filter(item => item.name === key))
//       })
//    }
// }

// 7.将动态路由 提交给 mutations 改变 state 的左侧菜单，结果就是每次显示的路由都是静态路由 + 筛选出的当前用户的权限路由

//       context.commit('setRoutes', routes)

// 8. 因为 state 是用来显示左侧菜单用的， return 是给路由 addRoutes 用的，所以：

//       return routes
// 9.在获取到用户的资料时调用封装好的筛选路由权限的函数

// src-- > permission-- > beforeEach
//  // 获取的就是  store --> modules --> user --> actions中的getUserInfo，
//             // 最后一步所 return result 的内容
//             // 所以 async 函数 return 的内容用 await 就可以接收到
//             // 解构出 roles 获取其中的标识
// const { roles } = await store.dispatch('user/getUserInfo')
//             // 调用 vuex 的 action 的筛选路由权限的函数，传入标识
//             const routes = await store.dispatch(
//                'permission/filterRoutes',
//                roles.menus
// )

// 10.应该把这个动态路由添加到路由表中，因为默认的路由表只有静态路由，没有动态路由

// router.addRoutes(routes)

// 11.添加完动态路由之后，跳到对应的地址，相当于多做一次跳转，然后解除静、动态路由的合并

// next(to.path)

// 12.把左侧显示的路由权限的页面，以前获取的路由信息设置一下

// src-- > layout-- > Sidebar-- > index
// ...mapGetters(['sidebar', 'routes']),

//    13.把路由模块的根节点 name 属性命名和权限标识一致，这样只要标识能对上，就说明用户拥有了该权限

// 14.出现问题：前一个登录的人的权限在下一个人还可以使用：原因：退出的时候刚才登录的路由依旧存在，而且给路由表中加入动态路由之后没删，
// 每次都是加，所以路由都是一直在

// 15.解决：我们应该把动态的路由表初始化成静态路由的情况，所以在登出的时候重置路由，并把权限模块下的路由为初始状态，也就是左侧的菜单栏

// src-- > store-- > modules-- > user 中登出操作的 logout
//   // 重置路由
// resetRouter()

// // 去设置权限模块下的路由为初始状态
//  // 因为不加命名空间的情况下，所有的 mutations 跟 action都是挂在全局上的
//       // 所以可以直接调用
//       // 但是加了命名空间的子模块怎么调用另一个加了命名空间的子模块的mutations
//       // 加了命名空间的 context 指的不是全局的 context
// // 参数1：mutation 的名称  参数2：载荷 payload  参数3： 对象 { root: true }
// // root 为 true 表示调用根级的 mutations 跟 actions
//       // 跳过了 父级，到了子级，调用子级
// context.commit('permission/setRoutes', [], { root: true })

// 16.出现问题：登录后跳转页面，一刷新，出现 404 ，原因：404 页面应该放到所有的路由的最后，但是现在处于静态路由的最后，应该放置于我们添加完有权限的动态路由后

// src-- > permission-- > beforeEach 修改：
// router.addRoutes([...routes, { path: '*',redirect: '/404',hidden: true }])
